import { defineComponent } from "vue";
import "./LeftItem.less";
import EventBus from '../util/event';


export default defineComponent({
  props: ["component"],
  setup(props) {
    const itemDragStart = (e:DragEvent) => {
      e.dataTransfer?.setData('component',props.component.id);
      EventBus.emit('before-record');
    };

    const itemDragEnd = (e:DragEvent) =>{
      EventBus.emit('after-record');
      e.dataTransfer?.clearData();
    }

    return () => (
      <div
        class="left-item"
        draggable
        onDragstart={itemDragStart}
        onDragend={itemDragEnd}
      >
        <span>{props.component.id}</span>
        <div class="left-item-component">{props.component.preview()}</div>
      </div>
    );
  },
});
